<template>
	<view>
		<view class="m-tab">
			<view class="m-tab-item " :class="{'m-tab-active':current==0}" @click="current = 0">
				<text>注册条款</text>
			</view>
			<view class="m-tab-item" :class="{'m-tab-active':current==1}" @click="current = 1">
				<text>会员协议</text>
			</view>
		</view>
		<view class="m-content">
			<u-parse v-if="current == 0" :html="zccontent"></u-parse>
			<u-parse v-else :html="content"></u-parse>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:0,
				zccontent:'',
				content:''
			}
		},
		onLoad() {
			this.getDetailFun()
		},
		methods: {
			getDetailFun(){
				this.$http.getJson('index_newsDetail',{id:28}).then(res=>{
					if(res.code == 1){
						this.zccontent = res.data.info.content
					}
				})
				this.$http.getJson('index_newsDetail',{id:29}).then(res=>{
					if(res.code == 1){
						this.content = res.data.info.content
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.m-tab{
	display: flex;
	width: 750rpx;
	height: 100rpx;
	.m-tab-item{
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
		height: 100%;
		border-bottom: 1px solid #E6E2DE;
		font-size: 28rpx;
		color: #33302D;
	}
	.m-tab-active{
		position: relative;
		&::after{
			content: '';
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			width: 60rpx;
			height: 6rpx;
			background: #D3A358;
		}
	}
}

.m-content{
	font-size: 28rpx;
	color: #33302D;
	padding: 30rpx 25rpx;
}
</style>
